{% extends "master.html" %} {% block title %}{% end %} {% block header%}
<link href="{{static_url('theme/plugins/select2/select2.min.css')}}" rel="stylesheet">
<link href="{{static_url('theme/plugins/iCheck/all.css')}}" rel="stylesheet">
<style type="text/css">
    .bo_list_item {
        padding-left: 10px;
    }
</style>
{% end %} {% block sidebar_header %}{% end %} {% block content_header_title%}角色权限{% end %} {% block content_header_breadcrumb%}{% end %} {% block content_body%}
<div class="row">
    <div class="col-md-12">
        <!-- form start -->
        <form role="form" id="users-role-caps-form">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <label for="bo-roles">角色</label>
                    <select class="select2" id="bo-roles" name="current_edit_role_name" style="width:100px;"></select>
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary" id="bo-role-add" data-toggle="modal" data-target="#bo_role_add_dlg">添加</button>
                        <button type="button" class="btn btn-primary" id="bo-role-rename" data-toggle="modal" data-target="#bo_role_rename_dlg">重命名</button>
                        <button type="button" class="btn btn-primary" id="bo-role-caps-update">更新权限</button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box">
                                <div class="box-header with-border">
                                    <h3 class="box-title">分组</h3>
                                </div>
                                <div class="box-body no-padding">
                                    <ul class="products-list product-list-in-box" id="bo_cap_groups_panel">
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="box">
                                <div class="box-header with-border">
                                    <input id="bo_role_cap_sel_all" type="checkbox" />
                                    <h3 class="box-title">权限</h3>
                                </div>
                                <div class="box-body no-padding">
                                    <ul class="products-list product-list-in-box" id="bo_caps_panel">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal fade" id="bo_role_add_dlg" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">创建新的角色</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="new-role-name" class="control-label">名称:</label>
                        <input type="text" class="form-control" id="new-role-name">
                    </div>
                    <div class="form-group">
                        <label for="new-role-display-name" class="control-label">显示名称:</label>
                        <input type="text" class="form-control" id="new-role-display-name">
                    </div>
                    <div class="form-group">
                        <label for="copy-from-role" class="control-label">复制于:</label>
                        <select id="copy-from-role" class="form-control select2">

                        </select> 复制存在的角色权限，然后再修改
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="bo_create_role_btn">创建</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="bo_role_rename_dlg" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">重命名角色</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="en_role_name" class="control-label">名称:</label>
                        <input type="text" class="form-control" id="en_role_name" readonly>
                    </div>
                    <div class="form-group">
                        <label for="en_role_display_name" class="control-label">显示名称:</label>
                        <input class="form-control" id="en_role_display_name" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="bo_modify_role_btn">修改</button>
            </div>
        </div>
    </div>
</div>
{% end %} {% block footer%}
<script src="{{static_url('theme/plugins/select2/select2.full.min.js')}}" type="text/javascript"></script>
<script src="{{static_url('theme/plugins/iCheck/icheck.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    function bo_fill_roles() {
        var r_sel_elem = $("#bo-roles");
        var data = r_sel_elem.data("bo_role_caps");
        var roles = data.roles;
        r_sel_elem.empty();
        var copy_from_role = $("#copy-from-role");
        copy_from_role.empty();
        for (var k = 0; k < roles.length; k++) {
            var item = roles[k];
            r_sel_elem.append('<option value="' + item[0] + '">' + item[1][0] + '</option>');
            copy_from_role.append('<option value="' + item[0] + '">' + item[1][0] + '</option>');
        }
    }

    function bo_list_caps(elm) {
        var group_name = $(elm).data("cap-group");
        bo_list_caps_by_group(group_name);
        bo_role_caps_fill();
    }

    function bo_fill_role_group() {
        var r_sel_elem = $("#bo-roles");
        var data = r_sel_elem.data("bo_role_caps");
        var bo_cap_groups_panel = $("#bo_cap_groups_panel");
        bo_cap_groups_panel.empty();
        bo_cap_groups_panel.append(
            '<li class="item"><a href="javascript:void(0);" data-cap-group="all" onclick="bo_list_caps(this);"><span class="bo_list_item">All</span></a> (' +
            data.caps.length + ')</li>');
        for (var k = 0; k < data.groups.length; k++) {
            var item = data.groups[k];
            bo_cap_groups_panel.append('<li class="item"><a href="javascript:void(0);" data-cap-group="' + item[0] +
                '" onclick="bo_list_caps(this);"><span class="bo_list_item">' + item[0] + '</span></a> (' + item[1] +
                ')</li>');
        }
    }

    function bo_role_caps_fill() {
        var role_name = $("#bo-roles").val();
        var r_sel_elem = $("#bo-roles");
        var data = r_sel_elem.data("bo_role_caps");
        for (var k = 0; k < data.roles.length; k++) {
            var item = data.roles[k];
            if (role_name == item[0]) {
                var caps = item[1][1];
                $("input[name='bo_role_cap_item']").each(function(i, v) {
                    $(this).prop("checked", false);
                    if ($.inArray($(this).val(), caps) != -1) {
                        $(this).prop("checked", true);
                    }
                });
            }
        }
    }

    function bo_list_caps_by_group(group_name) {
        var r_sel_elem = $("#bo-roles");
        var data = r_sel_elem.data("bo_role_caps");
        var caps = [];
        if (group_name == "all") {
            for (var k = 0; k < data.caps.length; k++) {
                var item = data.caps[k];
                caps[caps.length] = [item[0], item[1][1]]
            }
        } else {
            for (var k = 0; k < data.caps.length; k++) {
                var item = data.caps[k];
                if (item[1][0] == group_name) {
                    caps[caps.length] = [item[0], item[1][1]]
                }
            }
        }
        var bo_caps_panel = $("#bo_caps_panel");
        bo_caps_panel.empty();
        for (var k = 0; k < caps.length; k++) {
            var html = '<li class="item">';
            html += '<div class="bo_list_item">';
            html += '<div><input name="bo_role_cap_item" type="checkbox" value="' + caps[k][0] + '"/> ' + caps[k][0] + '</div>';
            html += '<div class="product-description">' + caps[k][1] + '</div>';
            html += '</div>';
            html += '</li>';
            bo_caps_panel.append(html);
        }
    }

    function bo_role_load() {
        $.post("{{api('bo_role_caps_load')}}", {}, function(rsp) {
            if (rsp.success) {
                $("#bo-roles").data("bo_role_caps", rsp.data);
                bo_fill_roles();
                bo_fill_role_group();
                bo_list_caps_by_group("all");
                bo_role_caps_fill();
            }
        }, "json");
    }

    $(function() {
        $(".select2").select2();
        $("#bo_role_cap_sel_all").click(function() {
            var chked = $(this).prop("checked");
            $("input[name='bo_role_cap_item']").each(function(i, v) {
                $(this).prop("checked", chked);
            });
        });
        $("#bo-roles").change(function() {
            bo_role_caps_fill();
        });
        $("#bo-role-rename").click(function() {
            var k_role_name = $("#bo-roles").val();
            $("#en_role_name").val(k_role_name);
            var r_sel_elem = $("#bo-roles");
            var data = r_sel_elem.data("bo_role_caps");
            for (var k = 0; k < data.roles.length; k++) {
                if (data.roles[k][0] == k_role_name) {
                    $("#en_role_display_name").val(data.roles[k][1][0]);
                    break;
                }
            }
        });
        $("#bo_create_role_btn").click(function() {
            var role_name = $.trim($("#new-role-name").val());
            if (role_name.length == 0) {
                $("#new-role-name").focus();
                return;
            }
            var role_display_name = $.trim($("#new-role-display-name").val());
            if (role_display_name.length == 0) {
                $("#new-role-display-name").focus();
                return;
            }
            var copy_role_name = $("#copy-from-role").val();
            $.post("{{api('bo_role_caps_add')}}", {
                name: role_name,
                display_name: role_display_name,
                copy_name: copy_role_name
            }, function(rsp) {
                if (rsp.success) {
                    bo_role_load();
                }
            }, "json");
        });
        $("#bo_modify_role_btn").click(function() {
            var en_role_display_name = $.trim($("#en_role_display_name").val());
            if (en_role_display_name.length == 0) {
                $("#en_role_display_name").focus();
                return;
            }
            $.post("{{api('bo_role_caps_rename')}}", {
                name: $("#en_role_name").val(),
                display_name: en_role_display_name
            }, function(rsp) {
                if (rsp.success) {
                    bo_role_load();
                }
            }, "json");
        });
        $("#bo-role-caps-update").click(function() {
            var params = $("#users-role-caps-form").serialize();
            $.post("{{api('bo_role_caps_save')}}", params, function(rsp) {
                if (rsp.success) {
                    bo_role_load();
                }
            }, "json");
        });
        bo_role_load();
    });
</script>
{% end %}